<template>
	<view class="u-wrap">
		<view>
			<u-navbar :is-back="false" text-align="center" title="首页"  :background="background"  title-size="40">
			</u-navbar>
		</view>

		<!-- 轮播图 -->
		<view class="lunbo" >
			<u-swiper :list="list" duration=500 border-radius=0></u-swiper>
		</view>

		<!-- 九宫格 -->	
		<view>
			<u-grid :col="3">
				<u-grid-item v-for="(dy,index) in dianyings" :key="dy.id">
					<view class="image-item" @click="play(dy.id)">
						<view class="image-content">
							<image style="width: 120px; height: 150px; background-color:#eeeeee;" mode="aspectFill"
								:src="'../../static/filmpics/film'+(index%9+1)+'.jpeg' " @error="imageError">
							</image>
						</view>
						<view class="image-title">{{dy.ming}}</view>
					</view>
				</u-grid-item>	
			</u-grid>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				
				background: {
					//backgroundColor: '#00ff00',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},

				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				mode: 'round',
				dianyings:[]
			}
		},
		// 一加载就请求电影的信息
		onLoad() {
			uni.request({
				url:"http://localhost:9090/dianyings",
				method:"GET",
				success:(res)=>{
					console.log(res);
					//更新电影集合
					this.dianyings=res.data.result;
				}
			})
		},
		methods: {
			play(dyid) {
				console.log(dyid);
				uni.navigateTo({
				url: '/pages/play?id='+dyid
				})
			},
			imageError() {
						
			}

		}
	}
</script>

<style scoped lang="scss" >
	@import "@/common/demo.scss";
	.lunbo{
		width:100vw;
		height:auto;
	}

		
</style>
